import React, { Component, createRef, RefObject } from 'react';
import { Form, FormInstance, Input, Button, Space, message } from 'antd';
import { set } from '../utils/storage'
import { login } from '../api/login';

import '../static/css/login.css'

const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 10 },
};


class Login extends Component {
    formRef: RefObject<FormInstance>
    constructor(props: any, context: any) {
        super(props, context);
        this.formRef = createRef<FormInstance>()
        this.state = {};
    }

    login = (from: any) => {
        // login(from.name, from.password).then(response => {
        //     const { code, msg, data } = response.data
        //     if (code === 0) {
        //         set('token', data.token)
        //         message.success(msg)
        //     } else {
        //         message.error(msg)
        //     }
        // })
        window.location.href = '/'
    }


    render() {
        return (
            <>
                <div className="container">
                    <div className="loginbox">
                        <h2>欢迎登陆</h2>
                        <Form {...layout} ref={this.formRef} onFinish={this.login}>
                            <Form.Item label='用户名' name="name" rules={[{ required: true, message: 'Please input your username!' }]}>
                                <Input />
                            </Form.Item>
                            <Form.Item
                                label="密码"
                                name="password"
                                rules={[{ required: true, message: 'Please input your password!' }]}
                            >
                                <Input.Password />
                            </Form.Item>
                            <Form.Item {...tailLayout}>
                                <Space>
                                    <Button type="primary" htmlType="submit">
                                        提交
                                    </Button>
                                    <Button type="primary" htmlType="reset">
                                        重置
                                    </Button>
                                </Space>

                            </Form.Item>
                        </Form>
                    </div>

                </div>

            </>
        );
    }
}

export default Login;

